<template>
  <div class="containters" style=";padding:10px;margin-bottom:10px">
    <el-form ref="formSearch" :inline="isInLine" class="inline-search" label-position="right" :label-width="labelWidth || '120px'" :model="formData" size="small">
      <el-form-item v-for="it in formItem" :key="it.searchProp || it.prop" :label="it.itemLabel || it.label + '：'" :prop="it.searchProp || it.prop" :label-width="it.width || labelWidth" :rules="it.rules">
        <!-- 给lable增加插槽,两种方式-->
        <template slot="label" v-if="it.labelSlot">
          <slot :name="it.prop"></slot>
        </template>
        <template slot="label" v-if="it.labelTip">
          <el-tooltip class="item" effect="dark" :placement="it.labelTipPlacement || 'top-start'">
            <div slot="content" v-html="it.labelTip"></div>
            <i class="el-icon-info"></i>
          </el-tooltip>
          <span> {{ it.label }}</span>
        </template>
        <!-- TODO 暂时未起效，待研究-->
        <template slot="error" slot-scope="scope" v-if="it.errorslot">
          <slot :name="it.prop"></slot>
        </template>
        <el-input v-if="it.input || it.inputMore" :type="it.inputMore ? 'textarea' : ''" :rows="it.row" v-model.trim="formData[it.prop]" :placeholder="
            it.placeSelf ? it.placeholer : `请输入${it.label || it.placeholer}`
          " :show-password="it.showPassword" :maxlength="it.maxLength" show-word-limit clearable :disabled="it.disabled">
          <!-- 这里用v-html,支持多样化，因为可能为简单的span， 也可能为select组件 -->
          <template slot="prepend" v-if="it.prepend">
            <span v-html="it.getPrependData && it.getPrependData()"></span>
            <!-- 这里也可以使用插槽，方便各组件更好的自定义 -->
            <slot :name="it.prop"></slot>
          </template>
          <template slot="append" v-if="it.getAppendData">
            <span v-html="it.getAppendData()"></span>
          </template>
          <i slot="prefix" v-if="it.prefix" :class="it.prefix" class="el-input__icon"></i>
          <i slot="suffix" v-if="it.suffix" :class="it.suffix" class="el-input__icon"></i>
        </el-input>
        <el-input v-if="it.number" v-model.trim="formData[it.prop]" clearable oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" :placeholder="`请输入${it.label || it.placeholer}`">
          <template slot="prepend" v-if="it.prepend">
            <span v-html="it.getPrependData && it.getPrependData()"></span>
            <!-- 这里也可以使用插槽，方便各组件更好的自定义 -->
            <slot :name="it.prop"></slot>
          </template>
          <template slot="append" v-if="it.getAppendData">
            <span v-html="it.getAppendData()"></span>
          </template>
          <i slot="prefix" v-if="it.prefix" :class="it.prefix" class="el-input__icon"></i>
          <i slot="suffix" v-if="it.suffix" :class="it.suffix" class="el-input__icon"></i>
        </el-input>
        <el-input-number v-if="it.inputNum" :min="it.min ||1" :max="it.max" :step="it.step" v-model="formData[it.prop]" :controls-position="it.controlsPosition">
        </el-input-number>
        <!-- 单选 -->
        <el-radio-group v-model="formData[it.prop]" v-if="it.radioGroup">
          <el-radio :label="i.label" v-for="i in it.list" :key="i.name">{{
            i.name
          }}</el-radio>
        </el-radio-group>
        <el-checkbox v-model="formData[it.prop]" v-if="it.check" :disabled="it.disabled" @change="checkChange">{{ it.name }}</el-checkbox>
        <!-- 多选 -->
        <el-checkbox-group v-model="formData[it.prop]" v-if="it.checkbox">
          <el-checkbox v-for="i in it.list" :label="i.id" :key="i.id">{{
            i.name
          }}</el-checkbox>
        </el-checkbox-group>
        <!-- switch -->
        <el-switch v-if="it.switch" style="display: block" v-model="formData[it.prop]" :active-color="it.activeColor || '#13ce66'" :inactive-color="it.inActiveColor || ' #ff4949'" :active-text="it.activeText" :inactive-text="it.inActiveText">
        </el-switch>



        <el-select clearable filterable v-if="it.tag" v-model="formData[it.searchProp || it.prop]" :placeholder="`请选择${it.label || it.placeholer}`" :disabled="it.disabled" :allow-create="it.allowCreate" @change="selectChange($event, it.prop)">
          <!--  @change="changeData(it.prop)" -->
          <!-- 树 -->
          <el-option v-for="opt in it.list" :key="opt.id" :label="opt.label" :value="opt.id" />
        </el-select>



        <el-select v-if="it.tree" clearable v-model="formData[it.prop]" :placeholder="`请选择${it.label || it.placeholer}`" :disabled="it.disabled" @clear="treeClear(it.prop, it.valueProp)">
          <el-option style="height: auto">
            <el-tree ref="elTree" :show-checkbox="it.showCheckbox" node-key="id" :data="it.data" :props="it.defaultProps" :current-node-key="[formData[it.valueProp]]" :highlight-current="it.highlightCurrent" @check="boxCheck" @node-click="(val) => handleNodeClick(val, it.prop, it.valueProp)">
              <!-- :default-expanded-keys="[formData[it.valueProp]]" -->
            </el-tree>
          </el-option>
        </el-select>
        <el-date-picker v-if="it.timeSelect" v-model="formData[it.prop]" :type="it.type" start-placeholder="开始日期" end-placeholder="结束日期" :placeholder="getTimeSelect(it, true)" :width="it.width" :format="it.type == 'week' ? 'yyyy 第 WW 周' : ''" :value-format="getTimeSelect(it)" />
        <el-time-select v-if="it.timeHour" v-model="formData[it.prop]" placeholder="选择时间">
        </el-time-select>
        <!-- :value-format="getTimeSelect(it)" -->
        <!-- value-format="yyyy-MM-dd HH:mm:ss" -->
        <el-cascader :key="key" v-model.trim="formData[it.prop]" :placeholder="it.itemLabel || it.label" v-if="it.elSelect" :options="options" clearable filterable :show-all-levels="false" @change="handleChange"></el-cascader>
        <!-- 上传 -->
        <el-upload v-if="it.upload" action="#" :http-request="uploadFile" :on-change="handleUploadChange" :show-file-list="true" :auto-upload="false" :file-list="getFileName(formData[it.nameProp])">
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <!-- <el-form-item> -->
      <el-button size="small" :type="it.types" v-for="it in buttonList" :icon="it.icon" :key="it.type" class="singalButton" @click="operationClick(it)" :style="{ display: it.alwaysShow ? 'inline-block' : 'none' }">{{ it.text }}</el-button>
      <!-- </el-form-item> -->
      <el-tooltip effect="dark" content="刷新" placement="top-start" v-if="isRefresh">
        <el-button size="small" style="position:absolute;right:10px" icon="el-icon-refresh" @click="refresh" circle></el-button>
      </el-tooltip>
      <span @click="iconExpand">
        <el-icon style="color:#11BAF7;cursor:pointer" v-show="isExpand" :class="showAll ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></el-icon>
      </span>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    formItem: {
      type: Array,
      default: () => []
    },
    downLoad: {
      type: Boolean,
      default: true
    },
    formData: {
      type: Object,
      default: () => {}
    },
    multipleSelection: {
      type: Array,
      default: () => []
    },
    tableList: {
      type: Array,
      default: () => []
    },
    titleList: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ""
    },
    isInLine: {
      type: Boolean,
      default: true
    },
    showPassword: {
      type: Boolean,
      default: true
    },
    //查询，置空按钮
    buttonList: {
      type: Array,
      default: () => {
        return [
          {
            type: "search",
            text: "查询"
          }
        ];
      }
    },
    // 是否携带刷新按钮
    isRefresh: {
      type: Boolean,
      default: false
    },
    // form表单是否折叠
    isExpand: {
      type: Boolean,
      default: false
    },
    labelWidth: {
      type: String,
      default: "120px"
    }
  },
  data() {
    return {
      options: [],
      key: 0,
      showAll: false
    };
  },
  computed: {
    ...mapGetters(["", ""])
  },
  watch: {
    options: {
      handler(n, old) {
        if (old && n !== old && n.length) {
          this.$emit("askAgain");
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    resetFields() {
      this.$refs.formSearch.resetFields();
    },
    getFileName(fileName) {
      if (fileName) {
        return [{'name': fileName}]
      }
    },
    getTimeSelect(it, tip) {
      let map = {
        // year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange
        year: { tip: "请选择年", formmat: "yyyy" },
        month: { tip: "请选择月", formmat: "yyyy-MM" },
        date: { tip: "请选择日期", formmat: "yyyy-MM-dd" },
        dates: { tip: "请选择一个或多个日期", formmat: "yyyy-MM-dd" },
        week: { tip: "请选择周", formmat: "yyyy-W" },
        datetime: { tip: "请选择日期时间", formmat: "yyyy-MM-dd HH:mm:ss" },
        datetimerange: { tip: "请选择年", formmat: "yyyy-MM-dd HH:mm:ss" },
        daterange: { tip: "请选择年", formmat: "yyyy-MM-dd" },
        monthrange: { tip: "请选择月", formmat: "yyyy-MM" }
      };
      return tip ? map[it.type].tip : map[it.type].formmat;
    },
    handleChange(value) {
      // if (value) {
      //   let length = value.length;
      //   if (length) {
      //     this.formData.substationCode = value.slice(length - 1, length)[0];
      //   } else {
      //     this.formData.substationCode = "";
      //   }
      // }
    },
    changeData(item) {},
    operationClick(it) {
      let obj = {
        search: "searchData",
        clear: "clearForm",
        add: "addForm",
        export: "exportData",
        import: "importData",
        delete: "bulkDelete",
        clear1: "clearForm1"
      };
      if (it.type == "clear") {
        for (let i in this.formData) {
          if (i !== "size" && i != "current") {
            this.formData[i] = null;
          }
        }
      }
      this.$emit(`${obj[it.type]}`);
    },
    checkChange(value) {
      this.$emit("checkChange", value);
    },
    selectChange(value, prop) {
      this.$emit("selectChange", value, prop);
    },
    refresh() {
      this.$emit("refresh");
    },
    uploadFile(data) {
      this.$emit("upload", data);
    },
    handleUploadChange(file, fileList) {
      this.uploadFile(file.raw);
    },
    handleNodeClick(val, prop, valueProp) {
      // console.log(val, prop);
      this.formData[prop] = val.label;
      this.formData[valueProp] = val.id;
      // console.log(this.formData,'fff');
    },
    treeClear(prop, valueProp) {
      this.formData[prop] = "";
      this.formData[valueProp] = "";
    },
    iconExpand() {
      this.showAll = !this.showAll;
      this.$emit("showAll", this.showAll);
    }
  }
};
</script>
<style lang="less" scoped>
.inline-search {
  .el-form-item {
    // margin-right: 20px;
  }

  .search-button {
    margin-right: 10px;
  }

  .el-select {
    width: 200px;
  }

  .el-date-editor {
    width: 200px;
  }

  .el-input,
  .el-textarea__inner,
  .el-textarea {
    width: 200px !important;
  }
}
.inline-search .el-date-editor {
  width: 350px;
}

.operation {
  height: 32px;
  margin-bottom: 20px;

  .singalButton {
    color: #fff;
  }
}

.open-close {
  color: #fff;
  cursor: pointer;
}
</style>
